{extend name="../../common/view/main"/}
{block name="style"}
<link href="__STATIC__/ucenter/css/main.min.css" rel="stylesheet">
{/block}
{block name="body"}
<div class="card-detail-container {$micro_config_data.style}">
    <div class="container-fixed clearfix">
        <h2>{$data['title']|default=''}</h2>
        <div class="card-detail-section">
            <div class="card-header clearfix">
                <div class="card-config-item">
                    <div class="card-config-item" data-title-color="{$data['config']['title']['color']|default=''}"
                        data-description-color="{$data['config']['description']['color']|default=''}"
                        data-card-bg-color="{$data['config']['bg']['color']|default=''}">

                        <div class="card-box">
                            <div class="card-bg">
                                {if !empty($data['config']['bg']['image'])}
                                <img src="{$data['config']['bg']['image_url']|default=''}" />
                                {else}
                                <div class="virtual-img"></div>
                                {/if}
                            </div>
                            <div class="card-info">
                                <div class="title clearfix">
                                    <div class="card-logo">
                                        <img src="{$data['cover_100']|default=''}" />
                                    </div>
                                    <div class="card-title">
                                        {if !empty($micro_config_data["title"])}
                                        {$micro_config_data.title|default=''}
                                        {else}
                                        {$muu_config_data.WEB_SITE_NAME|default=''}
                                        {/if}
                                    </div>
                                </div>
                                <div class="card-type">{$data['title']|default=''}</div>
                                <div class="card-description">{$data['description']|default=''}</div>
                                <div class="card-status">
                                    {if !empty($data.have_card)}
                                    <div class="status">已开通</div>
                                    {else}
                                    <div class="status">立即开通</div>
                                    {/if}
                                </div>
                                {if !empty($data.have_card)}
                                <div class="expiry-date">
                                    <div>有效期至：</div>
                                    <div>{$data.have_card.end_time_str|default=''}</div>
                                </div>
                                {/if}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-sale-item">
                    <!--会员价格-->
                    <div class="card-price-box clearfix">
                        {if $data['month_price'] > 0}
                        <div class="price active" data-type="month" data-title="{$data['title']} 月度会员">
                            ￥ {$data['month_price']} 元/月
                            <i class="fa fa-check" aria-hidden="true"></i>
                        </div>
                        {/if}
                        {if $data['quarter_price'] > 0}
                        <div class="price" data-type="quarter" data-title="{$data['title']} 季度会员">
                            ￥ {$data['quarter_price']} 元/季
                            <i class="fa fa-check" aria-hidden="true"></i>
                        </div>
                        {/if}
                        {if $data['year_price'] > 0}
                        <div class="price" data-type="year" data-title="{$data['title']} 年度会员">
                            ￥ {$data['year_price']} 元/年
                            <i class="fa fa-check" aria-hidden="true"></i>
                        </div>
                        {/if}
                        {if $data['year_two_price'] > 0}
                        <div class="price" data-type="year_two" data-title="{$data['title']} 两年会员">
                            ￥ {$data['year_two_price']} 元/两年
                            <i class="fa fa-check" aria-hidden="true"></i>
                        </div>
                        {/if}
                        {if $data['year_three_price'] > 0}
                        <div class="price" data-type="year_three" data-title="{$data['title']} 三年会员">
                            ￥ {$data['year_three_price']} 元/三年
                            <i class="fa fa-check" aria-hidden="true"></i>
                        </div>
                        {/if}
                        {if $data['year_five_price'] > 0}
                        <div class="price" data-type="year_five" data-title="{$data['title']} 五年会员">
                            ￥ {$data['year_five_price']} 元/五年
                            <i class="fa fa-check" aria-hidden="true"></i>
                        </div>
                        {/if}
                        {if $data['forever_price'] > 0}
                        <div class="price" data-type="forever" data-title="{$data['title']} 永久会员">
                            ￥ {$data['forever_price']} 元/永久
                            <i class="fa fa-check" aria-hidden="true"></i>
                        </div>
                        {/if}
                    </div>
                </div>
            </div>

            <div class="card-sale-btns">
                <!--卡密兑换激活 start-->
                {if !empty($convert_data)}
                <div class="cdkey-activate" data-type="cdkey-activate" data-remote="{:url('convert/pc.Form/vip', ['app'=>$convert_data['app'], 'info_id'=>$data['id'], 'info_type'=>'vipcard'])}" data-show-header="false" data-toggle="modal">
                    <div class="item">
                        <span class="title">激活码兑换</span>
                    </div>
                </div>
                {/if}
                <!--卡密兑换激活 end-->
                <!--开通或 已开通用户续费-->
                <div class="vip-sale" data-role="vip_sale" data-id="{$data['id']}" data-title="{$data['title']}"  data-api="{:url('ucenter/Vip/create',['app'=>$data['app'],'info_id'=>$data['id'],'info_type'=>'vipcard'])}">
                    <div class="item">
                        {if !empty($data['have_card']) && $data['have_card']['card_id'] == $data['id']}
                        <span>立即续费</span> <span class="title">{$data['title']}</span>
                        {else}
                        <span>立即开通</span> <span class="title">{$data['title']}</span>
                        {/if}
                    </div>
                </div>
            </div>
            <h2 class="title">权益描述</h2>
            <div class="card-content">
                
                <div class="detail">
                    {:htmlspecialchars_decode($data['content'])}
                </div>
            </div>
        </div>
    </div>
</div>

<!--配置数据-->
<input type="hidden" id="bgColor" value="{$data['config']['bg']['color']}"/>
<input type="hidden" id="titleColor" value="{$data['config']['title']['color']}"/>
<input type="hidden" id="descriptionColor" value="{$data['config']['description']['color']}"/>
{/block}

{block name="script"}
<script src="__STATIC__/ucenter/js/main.min.js"></script>
<script>
    $(function () {
        $('.card-config-item').each(function () {
            var _this = $(this);
            var title_color = _this.data('title-color');
            var description_color = _this.data('description-color');
            var bg_color = _this.data('card-bg-color');

            _this.find('.card-bg').css('backgroundColor', bg_color);
            _this.find('.card-title').css('color', description_color);
            _this.find('.card-type').css('color', title_color);
            _this.find('.card-description').css('color', description_color);
            _this.find('.expiry-date').css('color', description_color);

            //虚拟图高度设置
            var virtual_w = _this.find('.virtual-img').width();
            _this.find('.virtual-img').height(virtual_w * 0.6315104167);
        });
    });

    
    $(function(){
        var title_color = $('#titleColor').val();
        var description_color = $('#descriptionColor').val();
        var bg_color = $('#bgColor').val();
        /*选择价格*/
        $('.card-price-box .price').click(function(){
            $this = $(this);
            $('.card-price-box .price').css('backgroundColor','#eee');
            $('.card-price-box .price').css('borderColor','#eee');
            $('.card-price-box .price').css('color','#333');
            $this.css('backgroundColor',bg_color);
            $this.css('borderColor',bg_color);
            $this.css('color',title_color);
            $('.card-price-box .price').removeClass('active');
            $this.addClass('active');
        });
        // 
        $('.card-price-box .price:first').css('backgroundColor',bg_color);
        $('.card-price-box .price:first').css('borderColor',bg_color);
        $('.card-price-box .price:first').css('color',title_color);
        $('.card-price-box .price:first').addClass('active');
        //底部按钮
        $('.card-sale-btns .item').css('color',title_color);
        $('.card-sale-btns .item').css('backgroundColor',bg_color);
        //虚拟图高度设置
        var virtual_w = $('.virtual-img').width();
        $('.virtual-img').height(virtual_w * 0.6315104167);

        $('.card-bg').css('backgroundColor',bg_color);
        $('.card-title').css('color',description_color);
        $('.card-type').css('color',title_color);
        $('.card-description').css('color',description_color);
        $('.expiry-date').css('color',description_color);
        //激活码
        $('.cdkey-activate .item').css('color',bg_color);
        $('.cdkey-activate .item').css('backgroundColor',title_color);
    });

    $(function(){
        $('.vip-sale').click(function(){
            var url = $(this).data('api');
            var cycle = $('.card-price-box .price.active').data('type');
                url = url + '&cycle=' + cycle;
            var options = {
                url : url,
            };
            $.zui.modalTrigger.show(options);
        });
    });

</script>
{/block}